<template>
    <div class="admin-layout">
        <LoginView v-if="undefined == username"></LoginView>
        <el-container v-if="undefined != username">
          <el-aside id = "aside-menu" width="200px">
            <h5 class="mb-2" style="text-align: center;">仅帅哥可见</h5>
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
            >
              <el-sub-menu v-for="(menu) in data.list" :key="menu.id" :index=menu.id?.toString()>
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>{{ menu.name }}</span>
                </template>
                  <el-menu-item v-for="(menuChild, index) in menu.child" :key="menuChild.id" :index="menu.id+'-'+menuChild.id"
                  @click="showContent([menu.name,menuChild.name],menuChild.path,menuChild.code)">
                    {{ menuChild.name }}
                  </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-aside>
          <el-main v-if="breadcrumbs">
            <LearnContentView :breadcrumbs="breadcrumbs" :dataListPath = "dataListPath" v-if="contentCode === 'learnManage'"></LearnContentView>
            <StoryContentView :breadcrumbs="breadcrumbs" v-if="contentCode === 'historyManage'"></StoryContentView>
          </el-main>
          <el-main v-if="!breadcrumbs">
            <el-image src="/public/baili1.jpg" fit="contain" />
          </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { computed,ref,reactive,nextTick,toRef  } from "vue";
import { useStore } from 'vuex'
import { key } from '@/store/store';
import LoginView from './login/LoginView.vue'
import LearnContentView from '@/views/admin/learn/ContentView.vue'
import StoryContentView from '@/views/admin/story/StoryContentView.vue'

import axios from '../../request'
import type { menu } from '@/type/LearnMenu'
import { menus } from "@/type/LearnMenu";

import { Location } from '@element-plus/icons-vue'
// import bgImage from '@/assets/'

const store = useStore(key)
const username = computed(()=>{
  // return store.state.username;
  return sessionStorage.getItem("username");
})

store.state.username // 
// console.log(username)

if(undefined != username) {
  getMenu();
}

const data = reactive(new menus());

// 判断，如果username不为空，请求菜单
function getMenu() {
  // 请求需要的参数
  const parms = axios.get<menu[]>("/api/menu");
  parms.then((res)=>{
    data.list = res.data;
  });
}
let contentCode = ref()
// 给面包屑传参数
let breadcrumbs = ref()
let dataListPath = ref()

function showContent(breadcrumbsContent: (string | undefined)[],_dataListPath?:String,_contentCode?:String) {
  breadcrumbs.value = breadcrumbsContent;
  dataListPath.value = _dataListPath;
  contentCode.value = _contentCode;
  // console.log(_contentCode)
  // getDataList(_dataListPath);
  reload();
}

const isRefresh = ref(true)
async function reload () {
  isRefresh.value = false
  await nextTick()
  isRefresh.value = true
}

</script>